<template>
	<view class="">
		<view class="item mt20">
			<image class="durg-img" src="../static/images/drug.png" mode=""></image>
			<view class="right flex-1">
				<view class="flex-row align-center">
					<text class="title text-bold f40 text-bold">草红花</text>
					<view class="effect f20 ">
						功效：活血通经
					</view>
				</view>
				<view class="flex-row justify-between mt15 mr20">
					<view class="text f20">日产出:{{'0.4BAC'}}</view>
					<view class="text f20">有效期:{{'30天'}}</view>
					<view class="text f20">活跃值:{{'1'}}</view>
				</view>
				<view class="mt15">
					<view class="text f20">最多持有:{{'15'}}</view>
				</view>
				<view class="mt15">
					<view class="text f20">兑换需要:{{'100BAC'}}</view>
				</view>
				<view class="btn-huihuan">
					<image src="@/static/images/duihuan.png" mode=""></image>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
</script>

<style scoped lang="scss">
	.item {
		background-image: url('@/static/images/bg_plant.png');
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		padding: 30rpx 24rpx;
		display: flex;

		.durg-img {
			width: 178rpx;
			height: 178rpx;
		}

		.right {
			margin-left: 15rpx;
			position: relative;

			.title {
				color: $uni-text-color;
			}

			.effect {
				height: 36rpx;
				background-color: #BCCB9A;
				border-top-left-radius: 18rpx;
				border-bottom-right-radius: 18rpx;
				color: $uni-text-color ;
				margin-left: 10rpx;
				padding: 0 20rpx;
				line-height: 36rpx;
			}

			.text {
				color: $uni-text-color ;
			}

			.btn-huihuan {
				position: absolute;
				right: 10rpx;
				bottom: 0;

				image {
					width: 112rpx;
					height: 60rpx;
				}

			}
		}

	}
</style>